<template>
  <div class="navImg">
    <div class="left-view">
      <ul>
        <li
          v-for="(item, index) in list[leftIndex].imgList"
          :key="index"
          :class="list[leftIndex].rowNum=='3'?'little':''"
          class="list-li"
        >
          <!-- <a :href="item.link"> -->
          <img :src="item.imgUrl" alt />
          <!-- </a> -->
        </li>
      </ul>
    </div>
    <div v-if="list[leftIndex].showRight" class="right-view">
      <div class="nav-title">图文导航设置</div>
      <div class="form-title">一行显示</div>
      <el-select v-model="list[leftIndex].rowNum" placeholder="请选择每行显示个数" style="width: 224px;">
        <el-option
          v-for="item in rowNumOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div class="form-title">显示图片</div>
      <vuedraggable v-model="list[leftIndex].imgList" class="wrapper" animation="300">
        <transition-group>
          <div v-for="(item2, index2) in list[leftIndex].imgList" :key="index2" class="upload-box">
            <div class="removeBtn" @click.stop @click="removeBanner(index2)">
              <img src="/src/assets/settinyschool/delete.png" alt />
            </div>
            <el-upload
              :show-file-list="false"
              :on-success="(response, file, fileList)=>handleAvatarSuccess(response, file, fileList, index2)"
              :before-upload="beforeAvatarUpload"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
            >
              <img
                v-if="list[leftIndex].imgList[index2].imgUrl"
                :src="list[leftIndex].imgList[index2].imgUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <el-select
              v-model="list[leftIndex].imgList[index2].linkName"
              placeholder="请选择跳转页面"
              style="width: 224px;"
              @change="skipChange($event,index2)"
            >
              <el-option
                v-for="item in linkOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </transition-group>
      </vuedraggable>
      <el-upload
        :show-file-list="false"
        :on-success="addUploadSuccess"
        :before-upload="beforeAvatarUpload"
        class="addUploa-box"
        action="https://jsonplaceholder.typicode.com/posts/"
      >
        <el-button icon="el-icon-plus" class="addUploadBtn">添加图片导航</el-button>
        <div slot="tip" class="el-upload__tip">建议尺寸384*160,png或jpg格式,不大于2M</div>
      </el-upload>
    </div>
    <!-- 微页面弹框 -->
    <micropagedialog
      :dialog="microPageDialog"
      @cancelClick="cancelClick"
      @confirmClick="microPageConfirm"
    />
    <!-- 知识商品 -->
    <studyarticledialog
      :dialog="studyArticleDialog"
      @cancelClick="cancelClick"
      @confirmClick="studyArticleConfirm"
    />
    <!-- 商品分组 -->
    <articlegroupdialog
      :dialog="articleGroupDialog"
      @cancelClick="cancelClick"
      @confirmClick="articleGroupConfirm"
    />
    <!-- 自定义链接 -->
    <customlinkdialog
      :dialog="customLinkDialog"
      @cancelClick="cancelClick"
      @confirmClick="customLinkConfirm"
    />
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import micropagedialog from '../dialog/micropagedialog'
import articlegroupdialog from '../dialog/articlegroupdialog'
import customlinkdialog from '../dialog/customlinkdialog'
import studyarticledialog from '../dialog/studyarticledialog'
export default {
  components: {
    vuedraggable,
    micropagedialog,
    articlegroupdialog,
    customlinkdialog,
    studyarticledialog
  },
  props: ['list', 'leftIndex'],
  data() {
    return {
      selectValue: '',
      linkIndex: '',
      secondMenuDialog: false,
      microPageDialog: false,
      articleGroupDialog: false,
      customLinkDialog: false,
      studyArticleDialog: false,
      rowNumOptions: [
        {
          value: '3',
          label: '3'
        },
        {
          value: '4',
          label: '4'
        }
      ],
      linkOptions: [
        {
          value: '微页面',
          label: '微页面'
        },
        {
          value: '知识商品',
          label: '知识商品'
        },
        {
          value: '商品分组',
          label: '商品分组'
        },
        {
          value: '自定义链接',
          label: '自定义链接'
        }
      ]
    }
  },
  methods: {
    // 图片上传
    handleAvatarSuccess(res, file, fileList, index) {
      this.list[this.leftIndex].imgList[index].imgUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 添加图片上传
    addUploadSuccess(res, file) {
      var newImg = URL.createObjectURL(file.raw)
      this.list[this.leftIndex].imgList.push({
        link: '',
        linkName: '',
        imgUrl: newImg
      })
    },
    // 删除轮播事件
    removeBanner(index) {
      this.list[this.leftIndex].imgList.splice(index, 1)
    },
    // 选择跳转
    skipChange(val, index) {
      this.selectValue = val
      this.linkIndex = index
      if (val === '微页面') {
        this.microPageDialog = true
      } else if (val === '知识商品') {
        this.studyArticleDialog = true
      } else if (val === '商品分组') {
        this.articleGroupDialog = true
      } else if (val === '自定义链接') {
        this.customLinkDialog = true
      }
    },
    // 接收弹框取消事件
    cancelClick() {
      this.microPageDialog = false
      this.studyArticleDialog = false
      this.articleGroupDialog = false
      this.customLinkDialog = false
    },
    // 微页面弹框确认事件
    microPageConfirm(data) {
      this.microPageDialog = false
      this.list[this.leftIndex].imgList[this.linkIndex].linkName = this.selectValue + ' | ' + data.name
      this.list[this.leftIndex].imgList[this.linkIndex].link = data.link
    },
    // 知识商品确认事件
    studyArticleConfirm(data) {
      this.studyArticleDialog = false
      this.list[this.leftIndex].imgList[this.linkIndex].linkName = this.selectValue + ' | ' + data.name
      this.list[this.leftIndex].imgList[this.linkIndex].link = data.link
    },
    // 商品分组弹框确认事件
    articleGroupConfirm(data) {
      this.articleGroupDialog = false
      this.list[this.leftIndex].imgList[this.linkIndex].linkName = this.selectValue + ' | ' + data.name
      this.list[this.leftIndex].imgList[this.linkIndex].link = data.link
    },
    // 自定义链接弹框确认事件
    customLinkConfirm(data) {
      this.customLinkDialog = false
      this.list[this.leftIndex].imgList[this.linkIndex].linkName = '链接' + ' | ' + data.link
      this.list[this.leftIndex].imgList[this.linkIndex].link = data.link
    }
  }
}
</script>

<style lang="scss" scoped>
.navImg {
  .left-view {
    cursor: move;
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: block;
      min-height: 20px;
      .list-li {
        // float: left;
        display: inline-block;
        width: 23%;
        height: 123px;
        text-align: center;
        margin: 1%;
        img {
          border-radius: 5px;
          width: 100%;
          height: 100%;
        }
      }
      .list-li.little {
        width: 31%;
        height: 165px;
      }
    }
  }
  .right-view {
    float: left;
    position: fixed;
    top: 176px;
    right: 4%;
    width: 16%;
    height: 806px;
    overflow: auto;
    z-index: 7;
    box-sizing: border-box;
    padding: 10px 20px;
    padding-bottom: 200px;
    color: #353535;
    font-size: 14px;
    font-family: 'PingFangSC-Medium';
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    .nav-title {
      height: 50px;
      font-weight: 800;
      line-height: 50px;
      border-bottom: 1px solid #eee;
    }
    .form-title {
      margin: 16px 0px;
      .sign {
        color: red;
      }
    }
    .form-hint {
      font-size: 12px;
      color: #999;
      margin-bottom: 14px;
    }
    .upload-box {
      width: 248px;
      padding: 10px;
      margin-bottom: 5px;
      border: 1px solid transparent;
      position: relative;
      .removeBtn {
        display: none;
        position: absolute;
        top: -8px;
        right: -8px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 224px;
        height: 82px;
        line-height: 82px;
        text-align: center;
        background-color: #eee;
      }
      .avatar {
        width: 224px;
        height: 82px;
        display: block;
      }
    }
    .upload-box:hover {
      box-shadow: 0px 2px 13px 0px rgba(213, 212, 212, 0.5);
      border: 1px solid #e0e0e0;
      .removeBtn {
        display: block;
      }
    }
    .addUploa-box {
      .addUploadBtn {
        width: 224px;
        margin-left: 10px;
      }
      .el-upload__tip {
      }
    }
  }
  @media screen and (max-width: 1600px) {
    .left-view {
      ul {
        .list-li {
          height: 82px;
        }
        .list-li.little {
          height: 110px;
        }
      }
    }
    .right-view {
      right: 1%;
      width: 20%;
      padding: 10px;
      padding-bottom: 250px;
      height: 668px;
    }
  }
}
</style>
